<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // function fn() {
    //     console.log(this);
    // }

    // fn();  // this -> window

    // var obj = {
    //     a: 1,
    //     b: 2,
    //     say: function () {
    //         console.log(this.a, this.b);
    //     }
    // }

    // obj.say(); // this -> obj

    // document.onclick = function () {
    //     console.log(this); // this -> document
    // }

</script>
<script>
    // 箭头函数 可以理解为对普通函数的简写 => 但是箭头函数和普通函数还是有区别的

    // 注意:
    // 1. 箭头函数没有arguments
    // 2. 箭头函数没有自己的this指向 => 它this依赖于箭头函数所在作用域(父作用域)的this指向
    //    简单来说:箭头函数中遇到this就向外跳一层,找父作用域,如果父作用域还是箭头函数 => 在向外跳一层, 依次类推 => 全局作用域即window

    // 3. 箭头函数不能作为构造函数
    // 4. 不可以使用yield命令，因此箭头函数不能用作 Generator 函数


    // 箭头函数(一层 => 放在全局作用域 this => window)
    // var fn = () => {
    //     console.log(this);
    // }

    // fn();  // this -> window

    // var obj = {
    //     a: 1,
    //     b: 2,
    //     say: () => {
    //         console.log(this);  // this -> window
    //         console.log(this.a, this.b);
    //     }
    // }

    // obj.say(); // this -> window

    // document.onclick = (e) => {
    //     // console.log(e);
    //     console.log(this); // this -> window
    // }


    // 两层(普通函数嵌套箭头函数)


    /* function fn() {
        console.log(this); // this -> window

        let test = () => {
            console.log(this);  // this -> window
        }
        test();
    }

    fn();

    var obj = {
        a: 1,
        b: 2,
        say: function () {
            console.log(this); // this -> obj
            console.log(this.a, this.b);

            let test = () => {
                console.log(this);  // this -> obj
            }
            test();
        }
    }

    obj.say();

    document.onclick = function () {
        console.log(this); // this -> document

        let test = () => {
            console.log(this); // this -> document
        }
        test();

    } */


    // 箭头函数嵌套箭头函数


    var fn = () => {
        console.log(this);  // this -> window

        let test = () => {
            console.log(this); // this -> window
        }
        test();
    }

    fn();

    var obj = {
        a: 1,
        b: 2,
        say: () => {
            console.log(this);  // this -> window
            console.log(this.a, this.b);

            let test = () => {
                console.log(this); // this -> window
            }
            test();
        }
    }

    // obj.say(); // this -> window

    document.onclick = (e) => {
        // console.log(e);
        console.log(this); // this -> window

        let test = () => {
            console.log(this); // this -> window
        }
        test();
    }














</script>

</html>